<template>
  <div style="border-bottom: 1px solid #ccc">
    <van-nav-bar title="网易严选" name="wap-home-o" @click-left="onClickLeft">
      <template #left>
        <van-icon name="wap-home-o" size="28" />
      </template>
      <template #right>
        <van-icon name="search" size="28" />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <van-icon name="cart-o" color="#1989fa" size="28" />
      </template>
    </van-nav-bar>
  </div>
  <div class="centerbox">
    <img src="./image/login-img1.png" alt="" />
  </div>
  <van-form>
    <van-cell-group inset>
      <van-field
        v-model="loginForm.phone"
        name="pattern"
        label="手机号"
        placeholder="手机号"
        :rules="[{ pattern, message: '请填写正确手机号' }]"
      />
      <van-field
        v-model="loginForm.password"
        type="password"
        name="validator"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        @click="login"
      >
        登录
      </van-button>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <van-button
        round
        block
        type="default"
        native-type="submit"
        @click="gotologin"
      >
        返回
      </van-button>
    </div>
  </van-form>
</template>
<script lang="ts">
export default {
  name: "loginDetail",
};
</script>
<script setup lang="ts">
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { userlogin } from "@/store/user";
import { requserLogin } from "@/api/user";
import { showToast } from "vant";
const userlgin = userlogin();
const router = useRouter();
const pattern = /^1[3456789]\d{9}$/;
// const validator = (val) =>
  // /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{7,15}$/.test(val);

const loginForm = ref({
  phone: "18234285332",
  password: "12345678",
});
function gotologin() {
  router.push("/login");
}
const login = async () => {
  try {
    const res = await userlgin.userLogin(loginForm.value);
    console.log(111, "方法执行了", res);
    showToast("登录成功");
    router.push("/user");
  } catch (err) {
    showToast("手机号或者密码错误");
  }

  // console.log(loginForm.username,loginForm.password);
};
</script>

<style scoped lang="less">
.centerbox {
  width: 100%;
  height: 133px;
  overflow: hidden;
  margin-top: 10px;
  img {
    width: 142px;
    height: 48px;
    display: block;
    margin-top: 40px;
    margin-left: 110px;
  }
}
</style>